<template>
	<view :data-theme="theme" class="container">
		<view class="header">
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<u-search v-model="keyWord" @custom="searchProduct" @search="searchProduct" placeholder="请输入商品名称"
					actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
			</view>
		</view>

		<scroll-view class="scroll-view print_center" @scrolltolower="scrolltolowerFn" scroll-y
			style="height: 100%; overflow: hidden;">
			<checkbox-group class="checke_list" v-model="checkboxValue" @change="checkboxGroup">
				<label class="uni-list-cell uni-list-cell-pd checke_item" v-for="(item, index) in dataList"
					:key="index">
					<view class="item_top">{{item.checked}}
						<checkbox :value="JSON.stringify(item)" :iconColor="bgColor" :checked="item.checked"
							:disabled="item.disabled" class="round-checkbox" />
						<view class="item_img">
							<u--image :showLoading="true" :src="item.image" width="80px" height="80px"></u--image>
						</view>
						<view class="item_right">
							<text class="u-line-1">{{item.name}}</text>
							<view class="item_bottom" style="font-size: 30rpx;color: #808080;margin: 20rpx 0;">
								<span style="display: inline-block;margin-right: 30rpx;">关键字：<span
										style="color: #000;">{{item.keyword}}</span>
								</span>
							</view>
						</view>
					</view>
				</label>
			</checkbox-group>
		</scroll-view>

		<!-- 内容为空 -->
		<u-empty class="empty" v-if="!dataList.length" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<!-- 上拉加载更多 -->
		<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>

		<view class="footer">
			<view class="checkAll">
				<checkbox-group @change="onCheckAll">
					<label class="uni-list-cell uni-list-cell-pd check_text">
						<view>
							<checkbox :value="isAllChecked.toString()" :checked="isAllChecked" />
						</view>
						<view style="margin-left: 20rpx;">全选</view>
					</label>
				</checkbox-group>
			</view>
			<view class="footer_right" style="margin:0 20rpx 20rpx 20rpx;display: inline-block;">
				<button :color="bgColor" class="bg_color"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;" @click="goAddCoupon()">
					确认</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		platProductLstApi
	} from '@/api/product.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				keyWord: '',
				tableFrom: {
					page: 1,
					limit: 10,
					// cateId: '',
					// keywords: '',
					type: 1, //出售中1，仓库中2，已售罄3, 
				},
				dataList: [],
				totalPage: null,
				checkboxValue: [],
				loadMoreStatus: 'noMore',
				isAllChecked: false,
				paramsData: null, //上页面所传的值
			};
		},
		onLoad(params) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			if (params.data.length > 0) {
				this.paramsData = JSON.parse(params.data);
			}
		},
		created() {
			this.initData();
		},
		// 监听选中的数组
		watch: {
			checkboxValue(newVal, oldVal) {
				const filteredLis = this.dataList.filter(item => item.disabled == false)
				if (filteredLis.length == this.checkboxValue.length) {
					this.isAllChecked = true
				} else {
					this.isAllChecked = false
				}
			},
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.tableFrom.page = 1;
				this.loadMoreStatus = 'more';

				this.productList();
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				};
				this.tableFrom.page++;
				this.productList(true);
			},
			checkboxGroup(checkboxValue) {
				let checkBoxValue = checkboxValue.detail.value;
				// console.log(checkBoxValue,'checkbox')
				let checkBoxGroup = checkBoxValue.map((item) => JSON.parse(item));
				for (let item of checkBoxGroup) {
					item.checked = true;
				};
				this.checkboxValue = checkBoxValue;
			},
			/** 
			搜索
			 */
			searchProduct(valueKey) {
				this.tableFrom.page = 1;
				this.tableFrom.keywords = valueKey;
				this.loadMoreStatus = 'more';
				this.productList();
			},
			//---------------------
			productList(isMerge) {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (!isMerge) {
					this.tableFrom.page = 1;
					this.loadMoreStatus = 'more';
				};
				platProductLstApi(this.tableFrom).then((res) => {
					let data = res.data;
					if (isMerge) {
						that.$util.SplitArray(data.list, that.dataList);
					} else {
						that.dataList = data.list;
					}
					for (let item of that.dataList) {
						item.checked = false;
						item.disabled = false;
					};
					for (let i = 0; i < that.dataList.length; i++) {
						for (let j = 0; j < that.paramsData.length; j++) {
							if (that.dataList[i].id == that.paramsData[j].id) {
								that.dataList[i].disabled = true;
							}
						}
					}
					that.totalPage = data.totalPage;
					if (data.totalPage == that.tableFrom.page) {
						that.loadMoreStatus = 'noMore';
					}
					uni.hideLoading();
				})
			},
			// 全选框
			onCheckAll(val) {
				console.log('val',val)
				let that = this;
				let isAllCheck = val.detail.value.length > 0;
				if (isAllCheck) {
					// this.checkboxValue = this.dataList.map((item) => JSON.stringify(item));
					for (let item of that.dataList) {
						if (item.disabled !== true) {
							item.checked = true;
						}
					}
					this.$set(this,'dataList',this.dataList)
					console.log(this.dataList,'dataList')
					for (let ele of this.dataList) {
						if (ele.checked == true && ele.disabled !== true) {
							this.checkboxValue.push(JSON.stringify(ele))
						}
					}
				} else {
					this.checkboxValue = [];
					for (let item of that.dataList) {
						item.checked = false;
					}
				}
			},
			// 确认选择提交
			goAddCoupon() {
				if (!this.checkboxValue.length) {
					return uni.showToast({
						title: '请先选择商品',
						icon: 'error',
						duration: 2000
					});
				};
				let checkboxValue = this.checkboxValue.map((item) => JSON.parse(item))
				let selectProductArray = checkboxValue.map(item => {
					return {
						id: item.id,
						productName: item.name,
						image: item.image,
					};
				}); // 提取出所有 checked 属性值为 true 的对象的 count 属性值
				const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
				uni.navigateBack({
					delta: 1,
					success: (res) => {
						prevPage.$vm.otherFun(selectProductArray);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		background-color: #fff;
	}


	// .scroll-view {
	// 	height: 100%;
	// }

	// 内容为空
	.empty {
		flex: 1;
		height: 100%;
	}

	// 商品列表
	.print_center {
		// margin-top: 10px;
		// background-color: white;
		flex: 1;
		overflow: scroll;

		.checke_list {
			// width: 100%;
			margin: 20rpx;

			.checke_item {
				display: flex;
				flex-direction: column;
				// justify-content: space-around;
				// align-items: center;
				background-color: white;
				padding: 20px;
				margin-top: 10px;
				// width: 100%;
				border-radius: 20rpx;

				.item_top {
					display: flex;
					// justify-content: space-around;
					align-items: center;

					.item_img {
						margin-right: 10px;

						image {
							width: 50px;
							height: 70px;
						}

					}

					.item_right {
						font-weight: bold;
						line-height: 20px;
					}
				}

				.item_bottom {
					display: flex;
					align-items: center;
					// justify-content: flex-end;

					.counter {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100px;
						height: 30px;
						border: 1px solid #ccc;
						border-radius: 5px;
						overflow: hidden;
					}

					.counter text {
						width: 40px;
						height: 30px;
						text-align: center;
						line-height: 30px;
						font-size: 16px;
						color: #333;
					}
				}
			}
		}
	}

	.footer {
		background-color: #fff;
		display: flex;
		justify-items: center;
		text-align: center;
		justify-content: space-between;
		padding: 20rpx 0;

		.checkAll {
			flex: 1;

			.check_text {
				text-align: center;
				justify-items: center;
				// justify-content: center;
				padding-left: 30rpx;
				display: flex;
				margin: auto;
				line-height: 88rpx;
			}
		}

		.footer_right {
			flex: 1;
			text-align: center;
			justify-items: center;
		}
	}
</style>